
<template>
<div>
<!-- 
  <h1>{{ str.split("").reverse().join("") }}</h1>
  <h2>{{ changeStr }}</h2>

  <h2>2--</h2>
  <input v-bind:type="typeVal" v-bind:value="inputValue">
  <input type="text" :value="str">

  <h2>3--</h2>
  <button v-on:click="btnClick">是一个按钮</button>
  <button @click="btnClick">另一个按钮</button>
  <div @mouseover="mouseDiv">123</div>

  <h2>4--</h2>
  <h1>{{ str }}</h1>
  <h2 v-text="newStr"></h2>
  <h3 v-html="newStr"></h3> -->
  
  <!-- <h2>5--</h2>
  <h1>{{str}}</h1>
  <h2>--这是一个不变的数据--</h2>
  <button @click="btn">按钮</button>

  <h2>6--</h2>
  <input type="text" v-model="str">
  <h1>{{str}}</h1>
  <h2>7--</h2>
  <h2 v-once>{{str}}</h2> -->

  <h2>8--</h2>
  <h1 v-if="shopCar.length>0">{{shopCar}}</h1>
  <h1 v-else>sorry,空的</h1>

  <h2>9--</h2>
  <ul>
    <li v-for="item in shopCar" :key="item.key">{{item}}</li>
    <li v-for="(item,index) in shopCar" :key="item.key" >{{index}}</li>
  </ul>

  <h2>10--</h2>
  <ul v-if="shopCar.length>0">
    <li 
    v-for="item in shopCar" :key="item.key"
    >{{item}}</li>
  </ul>
  <h3 v-else>空的</h3>

</div>
</template>

<script>
/*如果shopCar是有数据的:['鞋','耳机','充电宝']  没有数据:显示信息空的 */
export default{
  data (){   //定义了数据
    return{
      str:"这是一个小数据",
      newStr:" <input type='text'>",
      inputValue:"这是value值",
      typeVal:"password",
      shopCar:['鞋','耳机','充电宝']
    }
  },
  computed:{
    changeStr(){
      return  this.str.split("").reverse().join("") ;
    }
  },
  methods:{  //放入方法
    btnClick(){
      alert(1);
    },
    mouseDiv(){
      console.log(2222);
    },
    btn(){
      this.str=123;
    }
  }
}
</script>

<style>
</style>
